import React from 'react';
import { Checkbox, Row, Col } from 'antd';
import { AxFormItemBase } from '../lib/AxFormItemBase';
import { AxCheckboxGroupProps } from './AxCheckboxGroupProps';

const Group = Checkbox.Group;
export const AxCheckboxGroup: React.FC<AxCheckboxGroupProps> = (props) => {
  const {
    span = 8,
    data = [],
    compact = false,
    children: childrenFromProps,
    ...rest
  } = props;

  const WrappedComponent = Group;
  /** 构造checkbox */
  let children = undefined;
  if (childrenFromProps) {
    children = childrenFromProps;
  } else {
    children = data && (
      <Row>
        {data.map((i: any, idx: number) => (
          <Col style={{ overflow: 'hidden' }} key={idx} span={span}>
            <Checkbox value={i.value}>{i.text}</Checkbox>
          </Col>
        ))}
      </Row>
    );
  }

  return (
    <AxFormItemBase
      children={children}
      style={{ width: '100%' }}
      WrappedComponent={WrappedComponent}
      {...rest}
    />
  );
}
